<template>
  <view class="uni-container">
    <view class="header">
      <view class="back">
        <view @click="navigateBack" style="margin-left: 15px;display: flex;align-items: center">
          <uni-icons type="back" size="24"></uni-icons>
          <text>返回</text>
        </view>
      </view>
    </view>
    <uni-forms ref="form" :label-width="90" :model="formData" validateTrigger="submit" err-show-type="toast">
      <view class="edit-box">
        <view class="title">
          <textarea class="uni-input" v-model="formData.title" auto-height @input="() => autoSaveContent && autoSaveContent()" placeholder="文章标题"/>
        </view>
        <editor-component @textchange="onTextChange" @ready="onEditorReady"></editor-component>
        <view class="settings">
          <uni-forms-item name="excerpt" label="文章摘要">
            <textarea
                class="excerpt"
                placeholder="文章摘要"
                auto-height
                v-model="formData.excerpt"
                @input="() => autoSaveContent && autoSaveContent()"
            ></textarea>
          </uni-forms-item>
          <uni-forms-item name="thumbnail" label="封面" required>
            <view class="thumb-mode">
              <radio-group @change="thumbModeChange">
                <radio value="1" class="mode" :checked="thumbMode === 1">单图</radio>
                <radio value="3" class="mode" :checked="thumbMode === 3">三图</radio>
                <radio value="0" class="mode" :checked="thumbMode === 0">无封面图</radio>
              </radio-group>
            </view>
            <view class="thumbnail-list" v-if="thumbMode > 0">
              <view class="thumbnail" v-for="(thumbnail, index) in formData.thumbnail">
                <template v-if="thumbnail">
                  <view class="remove-thumbnail" @click="() => removeThumbnail(index)">
                    <uni-icons type="closeempty" size="16" color="#fff"></uni-icons>
                  </view>
                  <image :src="thumbnail" mode="aspectFill" style="width: 150px; height: 150px;"></image>
                </template>
                <template v-else>
                  <uni-icons
                      @click="() => openInsertImageDrawer(index)"
                      class="placeholder"
                      type="plusempty"
                      size="60"
                      color="#e8e8e8"
                  ></uni-icons>
                </template>
              </view>
            </view>
            <view v-if="thumbMode > 0" style="color: #999; font-size: 13px; margin-top: 10px;">
              <text>为了保证最佳效果展示；请上传16:9的封面图片</text>
            </view>
          </uni-forms-item>
          <uni-forms-item name="user_id" label="作者" required>
            <uni-data-picker v-model="formData.user_id" style="width: 200px;" collection="uni-id-users"
                             where="role=='uni-cms-author'||role=='admin'"
                             field="nickname as text, _id as value"></uni-data-picker>
          </uni-forms-item>
          <uni-forms-item name="category_id" label="分类">
            <uni-data-picker v-model="formData.category_id" style="width: 200px;"
                             collection="uni-cms-categories" field="name as text, _id as value"></uni-data-picker>
          </uni-forms-item>
          <!--					<uni-forms-item name="is_sticky" label="是否置顶">-->
          <!--						<switch @change="binddata('is_sticky', $event.detail.value)" style="transform:scale(0.75)" :checked="formData.is_sticky"></switch>-->
          <!--					</uni-forms-item>-->
          <!--					<uni-forms-item name="is_essence" label="阅读加精">-->
          <!--						<switch @change="binddata('is_essence', $event.detail.value)" style="transform:scale(0.75)" :checked="formData.is_essence"></switch>-->
          <!--					</uni-forms-item>-->
          <!--					<uni-forms-item name="comment_status" label="开放评论">-->
          <!--						<uni-data-checkbox v-model="formData.comment_status"-->
          <!--															 :localdata="formOptions.comment_status_localdata"></uni-data-checkbox>-->
          <!--					</uni-forms-item>-->
        </view>
        <view class="uni-button-group m" style="padding-bottom: 50px">
          <button class="uni-button" style="width: 100px;margin-right: 10px;" @click="submit(0)">存为草稿</button>
          <button type="primary" class="uni-button" style="width: 100px;" @click="submit(1)">发布</button>
        </view>
      </view>
    </uni-forms>
    <view class="footer">
      <view class="wrap">
        <view class="left">
          <text class="auto-save" v-if="autoSave">
            {{ autoSave.status === 1 ? '自动保存中...' : '已自动保存' }}
          </text>
          <text class="word-count" v-if="wordCount !== null">共 {{ wordCount }} 字</text>
        </view>
        <view class="right">
          <view class="uni-button-group">
            <button class="uni-button" style="width: 100px;margin-right: 10px;" @click="submit(0)">存为草稿</button>
            <button type="primary" class="uni-button" style="width: 100px;" @click="submit(1)">发布</button>
          </view>
        </view>
      </view>
    </view>

    <uni-drawer
        class="insert-image-drawer"
        v-if="drawerWidth"
        ref="insertImageDrawer"
        mode="right"
        :width="drawerWidth"
    >
      <uni-media-library
          mode="picker"
          :selected-count="1"
          :media-tabs="['image']"
          @onInsert="onInsertCover"
      ></uni-media-library>
    </uni-drawer>
  </view>
</template>

<script>
// 引入编辑器组件
import EditorComponent from "@/uni_modules/uni-cms/components/editor/editor.vue";
// 引入表单验证规则
import {validator} from '@/uni_modules/uni-cms/common/validator/uni-cms-articles.js';
// 自动保存mixin
import autoSaveMixin from '@/uni_modules/uni-cms/common/auto-save-mixin.js';

// 引入数据库和相关命令
const db = uniCloud.database();
const dbCmd = db.command;
// 定义数据库集合名称
const dbCollectionName = 'uni-cms-articles'

// 获取表单验证规则
function getValidator(fields) {
  let result = {}
  for (let key in validator) {
    if (fields.includes(key)) {
      result[key] = validator[key]
    }
  }
  return result
}

export default {
  components: {
    EditorComponent
  },
  mixins: [autoSaveMixin],
  data() {
    // 初始化formData
    let formData = {
      "user_id": uniCloud.getCurrentUserInfo().uid,
      "category_id": "",
      "title": "",
      "content": {},
      "excerpt": "",
      "article_status": 0,
      "is_sticky": null,
      "is_essence": null,
      "comment_status": null,
      "thumbnail": ['']
    }
    return {
      formData, // 表单数据
      formOptions: {
        "comment_status_localdata": [
          {
            "value": 0,
            "text": "关闭"
          },
          {
            "value": 1,
            "text": "开放"
          }
        ]
      },
      rules: {
        ...getValidator(Object.keys(formData)) // 表单验证规则
      },
      formats: {}, // 编辑器格式
      wordCount: null, // 字数统计
      drawerWidth: 0, // 插入图片抽屉宽度
      autoGetCover: true, // 是否自动获取封面
      thumbMode: 1, // 封面图展示方式
    }
  },
  onReady() {
    this.$refs.form.setRules(this.rules) // 设置表单验证规则
  },
  mounted() {
    const sysinfo = uni.getSystemInfoSync()
    this.drawerWidth = sysinfo.windowWidth * .8
  },
  methods: {
    // 封面图展示方式改变
    thumbModeChange (e) {
      const coverCount = Number(e.detail.value)
      this.formData.thumbnail = Array.from(new Array(coverCount)).map((item, index) => {
        if (this.formData.thumbnail[index]) {
          return this.formData.thumbnail[index]
        } else {
          return ''
        }
      })
      this.thumbMode = coverCount
    },
    // 监听富文本编辑器内容变化
    onTextChange(e) {
      // 更新字数统计
      this.wordCount = e.detail
      // 自动获取编辑器正文内的图片作为封面图
      this.autoGetEditorImage()
      // 自动保存
      this.autoSaveContent && this.autoSaveContent()
    },
    autoGetEditorImage() {
      // 如果不自动获取封面图或者封面图展示方式为不展示，则不执行
      if (!this.autoGetCover || this.thumbMode === 0) return
      // 获取编辑器中的图片
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.editorCtx.getContents({
          success: (res) => {
            const {delta} = res
            const imageList = []
            delta.ops.forEach(item => {
              if (item.insert && item.insert.image) {
                if (!item.attributes || !item.attributes.class || item.attributes.class.indexOf('uploading') === -1) {
                  imageList.push(item.insert.image)
                }
              }
            })

            if (imageList.length <= 0) return
            const newThumbnail = [...this.formData.thumbnail]

            for (let i = 0; i < newThumbnail.length; i++) {
              const thumbnail = newThumbnail[i]
              if (thumbnail !== imageList[i]) {
                newThumbnail[i] = imageList[i] || ''
              }
            }
            this.formData.thumbnail = newThumbnail
          },
          fail: (e) => {
            console.error(e)
          }
        })
      }, 1000)

    },
    // 富文本编辑器初始化完成后触发
    onEditorReady(editorCtx) {
      if (!editorCtx) return

      // 保存editorCtx
      this.editorCtx = editorCtx

    },
    /**
     * 验证表单并提交
     */
    submit(status) {
      if (!this.formData.title) {
        // 如果标题为空，提示用户
        uni.hideLoading()
        return uni.showToast({
          icon: 'none',
          title: '文章标题必填',
        })
      }

      if (this.formData.thumbnail) {
        for (const thumbnail of this.formData.thumbnail) {
          if (!thumbnail) {
            // 如果封面图为空，提示用户
            uni.hideLoading()
            return uni.showToast({
              icon: 'none',
              title: '封面图必填',
            })
          }
        }
      }

      this.$refs.form.validate().then((res) => {
        this.editorCtx.getContents({
          success: (e) => {
            // 提交表单
            this.submitForm({
              ...res,
              thumbnail: this.formData.thumbnail,
              article_status: status,
              title: this.formData.title.trim(),
              content: e.delta,
              publish_date: Date.now()
            })
          }
        })
      }).catch((e) => {
        console.error(e)
      })
    },

    /**
     * 提交表单
     */
    submitForm(value) {
      uni.showLoading({
        mask: true
      })
      // 使用 clientDB 提交数据
      return db.collection(dbCollectionName).add(value).then((res) => {
        uni.showToast({
          icon: 'none',
          title: value.article_status === 0 ? '保存成功' : '发布成功'
        })
        try {
          // 触发父页面事件，刷新数据
          this.getOpenerEventChannel().emit('refreshData')
        } catch (e) {
        }

        // 清除自动保存内容
        this.clearAutoSaveStorage && this.clearAutoSaveStorage()

        setTimeout(() => {
          if (value.article_status === 0) {
            // 跳转到编辑页面
            uni.redirectTo({
              url: '/uni_modules/uni-cms/pages/article/edit/edit?id=' + res.result.id
            })
          } else {
            // 返回上一页
            uni.navigateBack()
          }
        }, 500)
      }).catch((err) => {
        uni.showModal({
          content: err.message || '请求服务失败',
          showCancel: false
        })
      }).finally(() => {
        uni.hideLoading()
      })
    },

    // 返回上一页或跳转到文章列表页
    navigateBack() {
      const pages = getCurrentPages()

      if (pages.length > 1) {
        // 返回上一页
        uni.navigateBack(-1)
      } else {
        // 跳转到文章列表页
        uni.redirectTo({
          url: '/uni_modules/uni-cms/pages/article/list/list'
        })
      }
    },

    openInsertImageDrawer(index) {
      this.$refs.insertImageDrawer.open()
      this.coverIndex = index
    },
    onInsertCover(selectMediaItems) {
      const coverIndex = this.coverIndex !== null ? this.coverIndex : 0
      const image = selectMediaItems[0]
      const newThumbnail = [...this.formData.thumbnail]

      newThumbnail[coverIndex] = image.src

      this.$refs.insertImageDrawer.close()
      this.formData.thumbnail = newThumbnail
    },

    removeThumbnail(index) {
      const newThumbnail = [...this.formData.thumbnail]
      newThumbnail[index] = ''

      this.formData.thumbnail = newThumbnail
      this.autoGetCover = false
    },
  }
}
</script>

<style lang="scss">
@import '@/uni_modules/uni-cms/common/style/article-detail.scss';
</style>
